<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
  <title>百度外卖</title>
  <!-- rem 适配 -->
  <script>
    //  页面打开 立即计算
    document.querySelector('html').style.fontSize = window.screen.width / 20 + 'px';
    // 尺寸更改也会重新计算
    // 这里 写这个事件的目的是为了 让我们 在桌面端测试是 可以自动计算 移动端
    window.onresize = function () {
      document.querySelector('html').style.fontSize = window.screen.width / 20 + 'px';
    }
  </script>
  <!-- swiper css -->
  <!-- 为了降低 请求的次数 把swiper的样式 也合并 -->
  <!-- <link rel="stylesheet" href="lib/swiper/swiper.min.css"> -->
  <!-- 在swiper样式的后面导入 避免 出现覆盖的问题 swiper的样式也合并 -->
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <!-- loading 页面 -->
  <div class="loading">
    <div class="rider"></div>
    <div class="progress">
      <div class="step"></div>
    </div>
    <div class="info"></div>
    <!-- 外卖LOGO -->
    <div class="logo"></div>
    <!-- 版权信息 -->
    <div class="copyright">
      @ 2021 Baidu Waimai Produced
    </div>
  </div>
  <!-- 欢迎页 布局 -->
  <div class="welcome">
    <div class="info">
      <div class="hello"></div>
    </div>
    <!-- 云 -->
    <div class="cloud"></div>
    <!-- 草地 -->
    <div class="grass1"></div>
    <!-- 熊笼 -->
    <div class="bear-box">
      <div class="bear"></div>
      <div class="smoke"></div>
    </div>
    <!-- 树 -->
    <div class="tree"></div>
    <!-- 草2 -->
    <div class="grass2"></div>

    <!-- 旋转的按钮 -->
    <div class="rotate-btn-box">
      <div class="btn"></div>
      <div class="circle1"></div>
      <div class="circle2"></div>
    </div>
    <!-- 外卖之路 -->
    <div class="waimai-load">长按启动,等待送回家</div>
  </div>
  <!-- swiper的结构 -->
  <div class="waimai-container">
    <div class="swiper-wrapper">
      <!-- 轮播页面1 -->
      <div class="swiper-slide page1">
        <div class="title">
          <h3>生活中，</h3>
          <p>经常会有这种情况<span>...</span></p>
          <div class="line"></div>
        </div>
        <!-- 轮播的盒子1 -->
        <div class="scroll-page1">
          <div class="bg"></div>
          <div class="person">
            <!-- 一沓纸 -->
            <div class="files">
              <!-- 纸1 -->
              <div class="paper1"></div>
              <!-- 纸1 -->
              <div class="paper2"></div>
            </div>
          </div>
          <div class="message-container">
            <div class="info"></div>
          </div>
        </div>
         <!-- 轮播的盒子2 -->
        <div class="scroll-page2">
          <div class="bg"></div>
          <div class="person">
            <!-- 腿1 -->
            <div class="leg1"></div>
            <!-- 腿2 -->
            <div class="leg2"></div>
          </div>
          <div class="message-container">
            <div class="info"></div>
          </div>
        </div>
        <!-- 轮播的盒子3 -->
        <div class="scroll-page3">
          <div class="bg"></div>
          <div class="person">
            <div class="word1"></div>
            <div class="word2"></div>
            <div class="word3"></div>
            <div class="word4"></div>
          </div>
          <div class="message-container">
            <div class="info"></div>
          </div>
        </div>
        <!-- 因为都有球 所以放在外面 -->
        <div class="sphere"></div>
        <!-- 熊 -->
        <div class="bear"></div>
      </div>
      <!-- 轮播页面2 -->
      <div class="swiper-slide page2">
        <div class="title">
          <h3>这时候</h3>
          <p>如果有一份美味外卖... <br>正好出现...</p>
          <div class="line"></div>
        </div>
        <div class="bg"></div>
        <div class="bear">
          <div class="face1"></div>
          <div class="face2"></div>
          <!-- 熊掌 -->
          <div class="hand-left"></div>
          <div class="hand-right"></div>
        </div>
        <div class="sphere"></div>
        <div class="table"></div>
        <div class="food"></div>
      </div>
      <!-- 轮播页面3 -->
      <div class="swiper-slide page3">
        <!-- 标题 -->
        <div class="title">
          <h3>这时候</h3>
          <p>如果有一份美味外卖... <br>正好出现...</p>
          <div class="line"></div>
        </div>
        <!-- 背景 -->
        <div class="bg"></div>
        <!-- 熊 -->
        <div class="bear"></div>
        <!-- 踢牌子的熊 -->
        <div class="animation-bear-box">
          <div class="animate-bear1"></div>
          <div class="animate-bear2"></div>
          <div class="animate-bear3"></div>
        </div>
        <!-- 星球 -->
        <div class="sphere"></div>
        <!-- 牌子 -->
        <div class="normal-card">
          <div class="license"></div>
          <div class="oil"></div>
          <div class="evil"></div>
        </div>

        <!-- 添加踢了之后的三块牌子 -->
        <div class="hit-card-box">
          <div class="card1"></div>
          <div class="card2"></div>
          <div class="card3"></div>
        </div>

      </div>
      <!-- 轮播页面4 -->
      <div class="swiper-slide page4">
        <!-- 标题 -->
        <div class="title">
          <h3>百度外卖</h3>
          <p>只做有品质的外卖... <br>操作便捷...</p>
          <div class="line"></div>
        </div>
        <!-- 背景 -->
        <div class="bg"></div>
        <!-- 熊 -->
        <div class="bear"></div>
        <!-- 星球 -->
        <div class="sphere"></div>
        <!-- 卡片 -->
        <div class="card1"></div>
        <div class="card2"></div>
        <div class="card3"></div>
      </div>
      <!-- 轮播页面5 -->
      <div class="swiper-slide page5">
        <!-- 标题 -->
        <div class="title">
          <h3>无论前方</h3>
          <p>狂风，大雨，还是飘雪... <br>始终坚持在路上...</p>
          <div class="line"></div>
        </div>
        <!-- 背景 -->
        <div class="bg"></div>
        <!-- 熊 -->
        <div class="bear">
          <div class="smoke"></div>
        </div>
        <!-- 星球 -->
        <div class="sphere"></div>
        <!-- 云 -->
        <div class="cloud">
          <!-- 添加雪片 -->
          <div class="snow"></div>
          <div class="snow"></div>
          <div class="snow"></div>
          <div class="snow"></div>
          <div class="snow"></div>
          <div class="snow"></div>
        </div>
      </div>
      <!-- 轮播页面6 -->
      <div class="swiper-slide page6">
        <!-- 标题 -->
        <div class="title">
          <h3>丰富礼品</h3>
          <p>让你边吃，边省钱... </p>
          <div class="line"></div>
        </div>
        <!-- 背景 -->
        <div class="bg"></div>
        <!-- 熊 -->
        <div class="bear">
          <div class="gift-box">
            <div><div class="gift1"></div></div>
            <div><div class="gift2"></div></div>
            <div><div class="gift3"></div></div>
            <div><div class="gift4"></div></div>
            <div><div class="gift5"></div></div>
            <div><div class="gift6"></div></div>
            <div><div class="gift7"></div></div>
            <div><div class="gift8"></div></div>
            <div><div class="gift9"></div></div>
            <div><div class="gift10"></div></div>
            <div><div class="gift11"></div></div>
            <div><div class="gift12"></div></div>
          </div>
        </div>
        <!-- 星球 -->
        <div class="sphere"></div>
      </div>
       <!-- 轮播页面7 -->
      <div class="swiper-slide page7">
        <!-- 标题 -->
        <div class="title">
          <h3>所有的努力</h3>
          <p>就是为了健康美味的外卖... <br>呈现给你...</p>
          <div class="line"></div>
        </div>
        <!-- 街灯 -->
        <div class="streetlight">
          <div class="light"></div>
        </div>
        <!-- 摩托车 -->
        <div class="motobike"></div>
        <div class="sphere"></div>
        <!-- 熊 -->
        <div class="bear"></div>
        <!-- 分享 -->
        <div class="share"></div>
        <div class="info">waimai.baidu.com</div>
      </div>
    </div>
  </div>

  <!-- 音频播放按钮 -->
  <audio src="music/music.mp3"></audio>
  <input type="button" class="audioControl"/>
</body>
</html>
<!-- swiper 的js -->
<script src="lib/swiper/swiper.min.js"></script>
<!-- zepto 的js -->
<script src="lib/zepto/zepto.js"></script>
<script src="lib/zepto/event.js"></script>
<script src="lib/zepto/touch.js"></script>
<script src="lib/zepto/fx.js"></script>
<script src="lib/zepto/fx_methods.js"></script>
<!-- 调用JS 设置swiper -->
<script>

  // 设置swiper
  var swiper = new Swiper('.waimai-container', {
    direction: 'vertical',
    // 添加回调函数
    onSlideChangeEnd: function(swiper){
      // alert(swiper.activeIndex);  // 切换结束时，告诉我现在是第几个slide
      
      $('.swiper-slide').eq(swiper.activeIndex).addClass('animate').siblings().removeClass('animate');

      // 判断是否滑动到了 第三页 索引为2
      if(swiper.activeIndex == 2){
        console.log('停止');
        $('.swiper-slide').eq(2).addClass('swiper-no-swiping');
      }

      console.log(swiper);
      if(swiper.previousIndex == 2){
        console.log('用户看完了第三页 索引为2的那一页');
        // 还原样式
        $('.swiper-slide').eq(2).find('.bear').attr('style','');
        $('.animation-bear-box div').attr('style','');
        $('.normal-card div').attr('style','');
        $('.hit-card-box div').attr('style','');

      }
    }
  });
  // 1.页面打开 稍微等一会 开启定时器
  $(function() {
    // 第一页的JS效果
    setTimeout(function() {
      $('.loading').addClass('animate');
      // 使用js的方式演示
      // document.querySelector('.loading .step').addEventListener('animationend',function(){
      //   console.log('播放完毕！');
      // })
      $('.loading .step').on('animationend',function(){
        console.log('jq --- 绑定end！');
        $('.loading').fadeOut(100,function(){
          // 淡出之后 为welcome添加animate
          $('.welcome').addClass('animate');
        });
      })
    },1000);

    //第二页的按钮 长按
    $('.welcome .rotate-btn-box').longTap(function(){
      console.log('按了好久哦！');
      // zepto 添加css中的 animation 动画
      $('.bear-box').css('animation','bearDisappear 1s forwards');
      
      //$('.bear-box').css('animation','none');
      setTimeout(function(){
        $('.welcome').fadeOut(1000,function(){
        // 为swiper的第一页 添加animate class
        $('.page1').addClass('animate');
        });
      },1000);
    });
    
    //swiper的第三页 索引为2
    $('.swiper-slide').eq(2).click(function(){
      console.log('点点点！');
      // 把中间的熊给隐藏
      // 无法清除的原因是动画
      $('.swiper-slide').eq(2).children('.bear').css('animation','none');
      var index = 0;
      var interId = setInterval(function(){
        // 踢牌子1 2 3 
        $('.animation-bear-box div').css('opacity',0);
        $('.animation-bear-box div').eq(index).css('opacity',1);
        
        //隐藏normal-card容器中的牌子
        $('.normal-card div').eq(index).css('animation','none');

        // 踢的同时把Card的显示 进行切换
        $('.hit-card-box div').eq(index).css('opacity',1);
        
        // 当index == 2 就开始踢最后一张
        if(index == 2){
          clearInterval(interId);
          // 往下掉
          // 没有效果 animate使用的是transition 动画混用
          $('.hit-card-box div').css('animation','bearDisappear 1s forwards');
          // 掉完了 开启 滑动
          setTimeout(function(){
            $('.swiper-slide').eq(2).removeClass('swiper-no-swiping');
          },1000);
        }

        // index 要累加
        index++; 
      },1000);
    })
  })

  // 为按钮绑定点击事件
  var audioDom = document.querySelector('audio');
  $('.audioControl').click(function(){
    if(audioDom.paused == true){
      // play paused 都是dom元素的 语法
      audioDom.play();
      $(this).css('background-image','url(images/play.png)');
    }else{
      audioDom.pause();
      $(this).css('background-image','url(images/pause.png)');
    }
  })
  // 分享到朋友圈
  $('.share').click(function(){
    alert('还在开发');
  })
</script>